<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BarChart</title>
</head>
<body>
    <script src="../d3.min.js"></script>
    <script>
        /*
        * define some params
        * */
        var dataset = [22,31,34,45,33,55,22];
        var width = 400;
        var height = 400;
        var svg = d3.select('body').append('svg')
            .attr('width',width)
            .attr("height",height);
        var padding = {top: 20, bottom: 20, left: 20, right: 20};
        var rectStep = 35;
        var rectWidth = 30;

        var rect = svg.selectAll("rect")
            .data(dataset)
            .enter()
            .append("rect")
            .attr("fill", "blue")
            .attr("x",function (d,i) {
                return padding.left + i * rectStep;
            })
            .attr("y",function (d) {
                return height - padding.bottom - d;
            })
            .attr("width",rectWidth)
            .attr("height", function (d) {
                return d;
            });
        var text = svg.selectAll("text")
            .data(dataset)
            .enter()
            .append("text")
            .attr("fill","white")
            .attr("font-size","14px")
            .attr("text-anchor","middle")
            .attr("x",function (d,i) {
                return padding.left + i * rectStep ;
            })
            .attr("y",function (d,i) {
                return  height - padding.bottom - d;
            })
            .attr("dx",rectWidth/2)
            .attr("dy","1em")
            .text(function (d) {
                return d;
            });
        var message = document.getElementsByTagName("svg").onclick =function () {
            alert("sdsss");
        }
    </script>

</body>
</html>